<template>
  <div class="rule-container">
    <div class="search-container">
      <div class="search-label">一体杆名称：</div>
      <el-input
        v-model="params.poleName"
        clearable
        placeholder="请输入内容"
        class="search-main"
        @clear="clearSearch"
      />
      <div class="search-label">一体杆编号：</div>
      <el-input
        v-model="params.poleNumber"
        clearable
        placeholder="请输入内容"
        class="search-main"
        @clear="clearSearch"
      />
      <div class="search-label">运行状态：</div>
      <el-select v-model="params.poleStatus" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        class="search-button"
        type="primary"
        @click="doSearch"
      >查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="addPole">添加一体杆</el-button>
      <el-button>批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="poleList">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" prop="id" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="一体杆ip" prop="poleIp" />
        <el-table-column label="安装区域" prop="areaName" />
        <el-table-column label="一体杆类型" prop="poleType">
          <template #default="scope">
            {{ formatPoleType(scope.row.poleType) }}
          </template>
        </el-table-column>
        <el-table-column label="运行状态" prop="poleStatus">
          <template #default="scope">
            {{ formatPoleStatus(scope.row.poleStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button size="mini" type="text" @click="editPole(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handelDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 切换分页 -->
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        :page-size="params.pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加弹框 -->
    <el-dialog
      :title="isId ? '编辑一体杆' : '添加一体杆'"
      :visible="dialogVisible"
      width="580px"
      @close="closeDialog()"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item
            label="一体杆名称"
            prop="poleName"
          >
            <el-input
              v-model="addForm.poleName"
              placeholder="请输入一体杆名称"
            />
          </el-form-item>
          <el-form-item
            label="一体杆编号"
            prop="poleNumber"
          >
            <el-input
              v-model="addForm.poleNumber"
              placeholder="请输入一体杆编号"
            />
          </el-form-item>
          <el-form-item
            label="一体杆IP"
            prop="poleIp"
          >
            <el-input
              v-model="addForm.poleIp"
              placeholder="请输入一体杆IP"
            />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <el-select v-model="addForm.areaId" placeholder="请输入关联区域">
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <el-select v-model="addForm.poleType" placeholder="请输入一体杆类型">
              <el-option
                v-for="item in poleTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="createPole"
        >确 定</el-button>
      </template>

    </el-dialog>

  </div>
</template>
<script>
import { getPoleListAPI, getAreaListAPI, createPoleAPI, delPoleAPI, editPoleAPI } from '@/api/rod'
export default {
  data() {
    return {
      poleList: [{
        id: null,
        poleName: '',
        poleNumber: null,
        poleIp: '',
        areaName: '',
        poleType: '',
        poleStatus: 0
      }],
      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '正常'
        },
        {
          value: 1,
          label: '异常'
        }
      ],
      value: '',
      checked: true,
      dialogVisible: false,
      isId: null,
      total: 0,
      areaList: [],
      poleTypeList: [{
        value: 'entrance',
        label: '入口'
      }, {
        value: 'export',
        label: '出口'
      }],
      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        poleStatus: ''
      },
      addForm: {
        poleName: '',
        poleNumber: null,
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      addFormRules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '关联区域', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请输入一体杆类型', trigger: 'blur' }
        ]

      }
    }
  },
  mounted() {
    this.getPoleList()
  },
  methods: {
    // 获取列表
    async getPoleList() {
      const res = await getPoleListAPI(this.params)
      console.log(res)
      this.poleList = res.data.rows
      this.total = res.data.total
    },
    formatPoleStatus(chargetType) {
      const MAP = {
        0: '正常',
        1: '异常'
      }
      return MAP[chargetType]
    },
    formatPoleType(chargetType) {
      const MAP = {
        export: '出口',
        entrance: '入口'
      }
      return MAP[chargetType]
    },
    // // 切换分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`)
    // },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getPoleList()
    },
    // 搜索
    doSearch() {
      this.params.page = 1
      this.getPoleList()
    },
    // 清楚搜索框
    clearSearch() {
      this.getPoleList()
    },

    // 添加一体杆
    async addPole() {
      this.dialogVisible = true
      const res = await getAreaListAPI()
      console.log(res)
      this.areaList = res.data.rows
      console.log(this.areaList)
    },
    // 点击确定创建一体杆
    async createPole() {
      if (this.isId) {
        await editPoleAPI(this.addForm)
      } else {
        await createPoleAPI(this.addForm)
      }
      this.getPoleList()
      this.dialogVisible = false
    },
    // 删除一体杆
    async handelDel(id) {
      this.$confirm('确认删除当前一体杆吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPoleAPI(id)
        this.getPoleList()
      }).catch(() => {

      })
    },
    // 编辑一体杆
    editPole(row) {
      this.isId = row.id
      // console.log(this.isId)
      this.dialogVisible = true
      const { id, poleName, poleNumber, poleIp, areaId, poleType } = row
      this.addForm = { id, poleName, poleNumber, poleIp, areaId, poleType }
      // console.log(row)
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.addForm = {}
      this.$refs.addForm.resetFields()
    }

  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 25px;
  }
  .search-button{
    margin-left: 40px;
  }

}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
</style>

